<template>
	<div class="jianjie-forum-detail flex-page-wrapper" v-if="detail.name">
		<div class="jianjie-content flex-page">
			<div class="jianjie-content-top">
				<div class="left">
					<h3>{{ detail['name' + En] }}</h3>
					<p><i>{{ detail['forumAddrValue' + En] }}</i><span v-if="!En"> &nbsp;馆</span>
						<image class="img" src="https://static.inclusionconf.com/static/images/time-icon.png" alt="" mode="widthFix" /><span>{{ detail['forumDateValue' + En] }} {{ detail.startTime }}-{{ detail.endTime }}</span>
					</p>
					<div class="text">{{ detail['blurb' + En] }}</div>
				</div>
				<block v-if="detail.yaoyue">
					<div class="yuyue yuyue1">
						<big>定向邀约</big>
					</div>
				</block>
				<block v-else>
					<div class="yuyue" v-if="!detail.yuyue && detail.keyuyue" @click.stop="reservation(detail)">
						<div class="big">{{ En ? 'Book Now' : '立即预约' }}</div>
					</div>
					<div class="yuyue yuyue1 disabled" v-if="detail.yuyue && detail.keyuyue" @click.stop="cancelReservation(detail)">
						<div class="big">已预约</div>
					</div>
				</block>
				<div class="right video-wrapper" v-if="detail.liveUrl">
					<!-- <div class="video" ref="video"></div> -->
					<!-- <live-player class="video" controls="controls" :src="detail.liveUrl"></live-player> -->
					<live-player class="video" id="liveplayer" :src="detail.liveUrl" :autoplay="true" />
				</div>
			</div>
			<div class="host-forum-bottom-wrapper" v-if="detail.forumScheduleNodeList && detail.forumScheduleNodeList[0] && detail.forumScheduleNodeList[0].forumScheduleList && detail.forumScheduleNodeList[0].forumScheduleList.length">
				<div class="host-forum-bottom">
					<image class="host-forum-bottom-title" src="https://static.inclusionconf.com/static/images/host-agenda-title.png" alt="" mode="widthFix" />
					<ul>
						<li v-for="(item, index) in detail.forumScheduleNodeList[0].forumScheduleList" :key="index">
							<div class="item" :key="index">
								<h3>{{ item['scheduleTheme' + En] }}</h3>
								<div class="small-name">{{ item['speechTheme' + En] }}</div>
								<div class="jiabings" v-if="item.guestKeyList && item.guestKeyList.length">
									<div class="jiabing" v-for="(it, i) in guestKeyList(item)" :key="index + 'e' + 'baa' + i">
										<image class="img" v-if="it.photoImgUrl" :src="it.photoImgUrl" alt="" mode="widthFix" />
										<image class="img" v-else src="https://static.inclusionconf.com/static/images/nojb.png" alt="" mode="widthFix" />
										<div class="text">
											<h4>{{ it['name' + En] }}</h4>
											<p>{{ it['position' + En] }}</p>
										</div>
									</div>
								</div>
								<div class="no-data" v-if="!guestKeyList(item).length"></div>
								<div class="time">{{ item.startTime }}</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<pub-mask v-if="showModify">
			<div class="status-mask">
				<div class="title">
					{{ $t('helper19') }}
				</div>
				<div class="content" v-html="$t('helper20')">
				</div>
				<div class="btns">
					<div class="btn" @click="showModify = false">{{ $t('secdetail3') }}</div>
					<div class="btn on" @click="modifyFnSec">{{ En ? 'Change' : '更换' }}</div>
				</div>
			</div>
		</pub-mask>
		<pub-mask v-if="showCancelReservation">
			<div class="status-mask">
				<div class="title">
					{{ $t('helper6') }}
				</div>
				<div class="content" style="height: 20px;"></div>
				<div class="btns">
					<div class="btn" @click="showCancelReservation = false">{{ $t('secdetail3') }}</div>
					<div class="btn on" @click="cancelReservationSec">{{ $t('secdetail2-1') }}</div>
				</div>
			</div>
		</pub-mask>
		<foot-wap :value="10"></foot-wap>
		<web-tips v-if="showTips"></web-tips>
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import JSEncrypt from '../../static/jsencrypt.min.js'

	export default {
		data() {
			return {
				showCancelReservation: false,
				showModify: false,
				detail: {},
				list: [],
				showVideo: true,
				flvPlayer: null,
				flvPlayer1: null,
				uuid: '',
				vid: '',
				showTips: false
			}
		},
		async onLoad(options) {
			this.uuid = options.uuid
			await this.webForumDetail()
			this.pageView('waitan_forumDetailPage', {
				contentID_var: this.uuid,
				contentName_var: this.detail.name,
				forumType_var: '无',
				forumSection_var: '无',
				forumLocation_var: this.detail.forumAddrValue + '馆',
				firstNavigation_var: this.detail.forumDateValue,
				secondNavigation_var: '无',
				viewFrom_var: '无',
				liveStatus_var: '回放'
			})
			// #ifdef MP-ALIPAY
			console.log(options, '个人中心参数')
			if (options.verifyEventInfo) {
				const query = JSON.parse(options.query)
				const verifyEventInfo = JSON.parse(options.verifyEventInfo)
				this.vid = verifyEventInfo.vid
				console.log(this.vid, '打印一下SN vid')
			}
			// #endif
		},
		async onShow() {
			this.showTips = true
			if (this.vid) {
				await protal.vidLogin({
					vid: this.getCrypt()
				}).then(res => {
					if (res.code === '0000') {
						uni.setStorageSync('token', res.data.token)
					}
				})
			}
		},
		onHide() {
			this.showTips = false
		},
		methods: {
			getCrypt() {
				var str = this.vid;
				// 公钥
				var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCyuMRsaJXsRs/IhUBsQeVU87qpa/ndLmSE0zkEq48K7ADmk/5jlwpP/FLXNn6xCexGOp1MOeSEmOEa6OrLrxS3UI+U8e/dJNoj+QAe2fQPMi73mZQv497P0Q2WaVeW6PSkuaTRSMDJCN2S8c/y+Y+5VmaX6uNOA48uSI/WpXAzwIDAQAB";
				// 加密
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				var encryptStr = encrypt.encrypt(str);
				return encryptStr
			},
			modifyFnSec() {
				protal.changeReservation(this.detail.uuid).then(res => {
					this.detail.yuyue = true
					this.showModify = false
				})
			},
			cancelReservationSec() {
				protal.cancelReservation(this.detail.uuid).then(res => {
					this.detail.yuyue = false
					this.showCancelReservation = false
				})
			},
			cancelReservation(item) {
				this.detail = item
				this.showCancelReservation = true
			},
			reservation(item) {
				protal.reservation(item.uuid).then(res => {
					item.yuyue = true
				}).catch(err => {
					if (err.code === '310005') {
						this.detail = item
						this.showModify = true
					}
				})
			},
			guestKeyList(item) {
				return item.guestKeyList.map(x => {
					return this.detail.forumGuestList.find(y => y.relKey == x) || {}
				})
			},
			queryReservationStatusList(arr) {
				return protal.queryReservationStatusList(arr).then(res => {
					const data = (res.data || [])
					return {
						yuyueList: data.filter(x => x.appointStatus == 1).map(x => x.forumUuid),
						yaoyueList: data.filter(x => x.forumStatus == 2).map(x => x.forumUuid),
						keyuyueList: data.filter(x => x.forumStatus == 1).map(x => x.forumUuid),
					}
				})
			},
			webForumDetail() {
				return protal.webForumDetail(this.uuid).then(async res => {
					const obj = await this.queryReservationStatusList([res.data.uuid])
					const data = res.data || {}
					data.yuyue = obj.yuyueList.includes(data.uuid)
					data.yaoyue = obj.yaoyueList.includes(data.uuid)
					data.keyuyue = obj.keyuyueList.includes(data.uuid)
					this.detail = data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.jianjie-forum-detail {
		// background: url(https://static.inclusionconf.com/static/images/jianjie-forum-detail-bg.jpg);
		// background-size: 100% 110%;
		background: #1E234B;
		padding-top: 12px;

		.flex-page {
			overflow: auto;
		}

		.jianjie-content {
			width: 100%;
			padding: 87px 18px 60px;
			box-sizing: border-box;
			margin: 0 auto;

			.back {
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 14px;
				color: #999;
				line-height: 14px;
				text-align: left;
				font-style: normal;
				cursor: pointer;
				font-weight: bold;
				margin-bottom: 16px;
			}

			.jianjie-content-top {
				padding-bottom: 20px;
				border-bottom: 1px solid rgba(115, 80, 245, .4);

				.left {
					h3 {
						font-family: AlibabaPuHuiTi_3_85_Bold;
						font-size: 24px;
						color: #FFFFFF;
						line-height: 30px;
						text-align: left;
						font-style: normal;
					}

					p {
						display: flex;
						align-items: flex-end;
						margin: 21px 0 12px;

						i {
							font-family: AlibabaSans102Ver2, AlibabaSans102Ver2;
							font-weight: bold;
							font-size: 24px;
							color: #7C5CFF;
							line-height: 24px;
							text-align: left;
							font-style: normal;
						}

						span {
							font-family: AlibabaPuHuiTi_3_45_Light;
							font-size: 12px;
							color: #CECED8;
							line-height: 12px;
							text-align: left;
							font-style: normal;
						}

						.img {
							width: 14px;
							height: 14px;
							margin: 0 6px 0 20px;
							position: relative;
							top: 1px;
						}
					}

					.text {
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 12px;
						color: #FFFFFF;
						line-height: 19px;
						text-align: left;
						font-style: normal;
					}
				}

				.right {
					height: 380rpx;
					overflow: hidden;
					margin-top: 18px;

					.video {
						width: 100%;
						height: 100%;
						object-fit: fill;
					}
				}

				.yuyue {
					width: 100%;
					height: 40px;
					background-color: #3C2DAA;
					margin-top: 16px;
					display: flex;
					align-items: center;
					justify-content: center;

					.big {
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 14px;
						color: #FFFFFF;
						line-height: 14px;
						text-align: center;
						font-style: normal;
						display: block;
					}

					small {
						padding-top: 3px;
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 10px;
						color: rgba(255, 255, 255, 0.6);
						line-height: 10px;
						text-align: center;
						font-style: normal;
						display: block;
					}

					&.yuyue1 {
						display: flex;
						align-items: center;
						justify-content: center;

						big {
							padding-top: 0;
						}
					}

					&.disabled {
						opacity: 0.5;
					}
				}
			}

			.host-forum-bottom-wrapper {

				.host-forum-bottom {
					padding: 34px 0 0;

					.host-forum-bottom-title {
						width: 160px;
						height: auto;
						margin-bottom: 20px;
					}

					.host-forum-bottom-speaker-title {
						margin-bottom: 2px;
					}

					ul {

						li {
							padding-left: 13px;
							padding-bottom: 12px;
							position: relative;
							padding-top: 32px;

							&::before {
								content: "";
								position: absolute;
								left: 0;
								top: 0;
								height: 100%;
								border-left: 1px solid rgba(115, 80, 245, .3);
							}

							&:last-child {
								padding-bottom: 0;
							}

							.title {
								font-family: AlibabaPuHuiTi_3_85_Bold;
								font-size: 24px;
								color: #1650FF;
								line-height: 24px;
								text-align: left;
								font-style: normal;
								margin-bottom: 16px;
							}

							.item {
								width: 100%;
								border: 1px solid rgba(115, 80, 245, 0.4);
								position: relative;

								h3 {
									height: 44px;
									background: rgba(60, 45, 170, .3);
									font-family: AlibabaPuHuiTi_3_85_Bold;
									font-size: 14px;
									color: #FFFFFF;
									line-height: 20px;
									font-style: normal;
									display: flex;
									align-items: center;
									padding-left: 12px;
									position: relative;

									&::before {
										content: "";
										position: absolute;
										left: -17px;
										top: -22px;
										width: 7px;
										height: 7px;
										background: #1033B1;
										border-radius: 50%;
									}
								}

								.small-name {
									font-family: AlibabaPuHuiTi_3_45_Light;
									font-size: 12px;
									color: #FFFFFF;
									line-height: 18px;
									text-align: left;
									font-style: normal;
									margin: 12px 12px 0 12px;
								}

								.jiabings {
									padding: 14px 12px 0 12px;

									.jiabing {
										display: flex;
										margin-bottom: 16px;

										.img {
											width: 44px;
											height: 44px;
										}

										.text {
											margin-left: 8px;

											h4 {
												font-family: AlibabaPuHuiTi_3_65_Medium;
												font-size: 12px;
												color: #FFFFFF;
												line-height: 12px;
												text-align: left;
												font-style: normal;
												margin-bottom: 6px;
												font-weight: normal;
											}

											p {
												font-family: AlibabaPuHuiTi_3_45_Light;
												font-size: 10px;
												color: #999BAD;
												line-height: 13px;
												text-align: left;
												font-style: normal;
											}
										}
									}
								}

								.no-data {
									height: 20px;
								}

								.time {
									position: absolute;
									left: 0;
									top: -32px;
									width: 99px;
									height: 26px;
									border: 1px solid rgba(115, 80, 245, 0.4);
									font-family: AlibabaPuHuiTi_3_65_Medium;
									font-size: 12px;
									color: #FFFFFF;
									line-height: 12px;
									font-style: normal;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}

					/deep/ .speaker-content {
						padding: 0;

						.home-title {
							display: none;
						}
					}
				}
			}
		}
	}
</style>